<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>FFlash 15x15 Black-White Chess</title>
<style>
    html,body {
        margin: 0;
        padding: 0;
        user-select: none;
    }
    body {
        margin: 0 auto;
        width: 100vw;
        height: 100vh;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-self: start;
    }
    pre, ul, input,select{
        margin: 0;
        padding: 0;
    }
    input,select{
        background-color: transparent;
        border: none;
        outline: none;
    }
    a{
        color:black;
    }
    label, .label{
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #head {
        width: 100%;
        height: 20%;
        background-color: aqua;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;
    }
    #head .row {
        width: 100%;
        font-size: 3.2vh;
        color: cadetblue;
        text-align: center;
    }
    #head #game-status, #head #ai-status {
        font-size: 2.8vh;
        display: inline-flex;
        justify-content: center;
        white-space: break-spaces;
    }
    #head #ai-status .say {
        color: blueviolet;
    }

    #area {
        width: 100%;
        height: 65%;
        background-color: #505050;
        display: grid;
        justify-content: center;
        align-content: center;
        align-items: center;
        grid-gap: 2pt;
    }
    .pbox {
        background-color: gray;
        width: 5.8dvw;
        height: 5.8dvw;
        line-height: 5.8dvw;
        cursor: pointer;
        color: orangered;
        text-align: center;
        font-size: 1.7vh;
        font-weight: bold;
        transition: 1.0s;
    }
    .pbox:hover {
        background-color: #aaaaaa;
    }
    @keyframes pbox-frame {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    .pbox-black, .pbox-white {
        opacity: 0.5;
        animation: pbox-frame 1.2s;
        animation-fill-mode: forwards;
        clip-path: circle(50%);
    }
    .pbox-black, .pbox-black:hover {
        background-color: #303030;
    }
    .pbox-white, .pbox-white:hover {
        background-color: #eeeeee;
    }

    #bottom {
        width: 100%;
        height: 15%;
        background-color: blueviolet;
    }
    #bottom .row {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        font-size: 3.5vh;
        color: whitesmoke;
    }
    #bottom .tool {
        cursor: pointer;
    }
    #bottom .tool:hover {
        background-color: #c03fff;
    }
    #bottom .tool select {
        color: #aaaaaa;
    }

    ux-template {
        display: none;
    }
</style>
</head>
<body style="display: none;">
<div id="head">
    <div class="row" id="game-info">Player vs Player</div>
    <div class="row" id="game-status"></div>
    <div class="row" id="ai-status"></div>
</div>
<div id="area"></div>
<div id="bottom">
    <div class="row">
        <div class="tool">UCT:
            <select id="sel-uct-times">
                <option ux-value="16384">16384</option>
                <option ux-value="32768">32768</option>
                <option ux-value="65536">65536</option>
                <option ux-value="131072">131072</option>
                <option ux-value="262144">262144</option>
                <option ux-value="524288">524288</option>
                <option ux-value="1048576">1048576</option>
            </select>
        </div>
        <div class="tool">◈
            <select id="sel-extra">
                <option ux-value="0" param="level">Lv.0</option>
                <option ux-value="1" param="level">Lv.1</option>
                <option ux-value="2" param="level">Lv.2</option>
                <option ux-value="3" param="level">Lv.3</option>
                <option ux-value="4" param="level">Lv.4</option>
                <option ux-value="5" param="level">Lv.5</option>
                <option ux-value="6" param="level">Lv.6</option>
                <option ux-value="7" param="level">Lv.7</option>
                <option ux-value="8" param="level">Lv.8</option>
                <option ux-value="9" param="level">Lv.9</option>
                <option ux-value="random-game">Random(Any)</option>
                <option ux-value="random-game-mid">Random(Mid)</option>
                <option ux-value="random-game-end">Random(End)</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="tool" id="cmd-reset">重开</div>
        <label>AI</label>
        <div class="tool"><label><input type="checkbox" id="use-ai-black" />○</label></div>
        <div class="tool"><label><input type="checkbox" id="use-ai-white" />●</label></div>
        <div class="tool" id="cmd-load-first">▲</div>
        <div class="tool" id="cmd-undo">◀</div>
        <div class="tool" id="cmd-redo">▶</div>
        <div class="tool" id="cmd-load-last">▼</div>
    </div>
</div>
<ux-template id="pbox">
    <div class="pbox" style="grid-row:[ROW]; grid-column:[COL];"></div>
</ux-template>
</body>
<script>document.write(((a,b)=>(`${a}t type="module" src="./main.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
